<template>
	<view class="circle">
		<!-- 顶部 -->
		<view class="wine_btns">
			<view class="quickone">
				<img src="/static/wine-circle/quickone.png" alt="">
			</view>
			<view class="wines">
				<view class="yunjiu">
					<img src="/static/wine-circle/yunjiu.png" alt="">
				</view>
				<view class="ganyibei">
					<img src="/static/wine-circle/ganyibei.png" alt="">
				</view>
			</view>
		</view>
		<!-- 标签切换 -->
		<view class="wine_tab">
			<view :class="curIndex == 1 ? 'active' : ''" class="tabs_item recommend" @tap="wineTabBtn(1)">推荐</view>
			<view :class="curIndex == 2 ? 'active' : ''" class="tabs_item care_about" @tap="wineTabBtn(2)">关注</view>
			<view :class="curIndex == 3 ? 'active' : ''" class="tabs_item activity" @tap="wineTabBtn(3)">线下活动</view>
			<view :class="curIndex == 4 ? 'active' : ''" class="tabs_item culture" @tap="wineTabBtn(4)">酒文化</view>
			<view :class="curIndex == 5 ? 'active' : ''" class="tabs_item story" @tap="wineTabBtn(5)">故事与酒</view>
		</view>
		<!-- 视频列表 -->
		<view class="circle_list">
			<view class="list_main">
				<view class="list_item" v-for="(item, index) in imgList" key="index" :style="{height: `${item.height}`}">
					<img src="" alt="">
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				curIndex: 1,
				imgList: [{
					img: '',
					height: '400rpx'
				},{
					img: '',
					height: '400rpx'
				},{
					img: '',
					height: '400rpx'
				},{
					img: '',
					height: '400rpx'
				},{
					img: '',
					height: '400rpx'
				}]
			}
		},
		methods: {
			wineTabBtn(id) {
				this.curIndex = id
			},

		}
	}
</script>

<style>
	@import './circle.css'
</style>